<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<add-number-component></add-number-component>
		</div>
		
		<template id="addNumTemplate">
			<div>
				<a v-text="username"></a>
				<a v-text="age"></a>
				<button type="button" v-on:click="addNmber">增1</button>
			</div>
		</template>
		
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			//定义组件化
			Vue.component("addNumberComponent",{
				data: function(){
					return{
						username: 'zhangsan',
						age: 18
					}
				},
				template: "#addNumTemplate",
				//方法区
				methods: {
					addNmber:function(){
						//年龄加一
						this.age = this.age+1;
					}
				}
			})
			
			
			
			const vue  = new Vue({
				el: "#app",
				data: {},
				methods: {},
				mounted() {
					
				}
			})
		</script>
		
	</body>
</html>
